{{extend 'layout.html'}}
<style>
  .chart {width: 90%}
  .chart a {text-decoration: none; }
  .chart table {width:80%; font-size: 0.7em}
  .chart table, .chart th, .chart tr, .chart td { border:0; padding:0; margin:0; vertical-align:middle;}
</style>

{{m = rows and max(row(count) for row in rows) or 1}}
<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">ILDG values for {{=request.vars.key}}</li>
    {{for row in rows:}}
  <li>
    <a style="vertical-align:middle;" href="{{=URL('search',vars=dict(keywords='%s %s'%(request.vars.key,row.parameter.value)))}}">
      <span style="float: left; height:20px; width:{{=400*row(count)/m}}px;
		   background-color: #FADB4E; border: 1px solid black;"
	    class="chartbar ui-btn ui-btn-inline ui-btn-corner-all 
		   ui-shadow ui-btn-up-d">{{=row(count)}}</span>      
      <span style="float:right">{{=row.parameter.value}}</span>
    </a>    
  </li>
  {{pass}}
</uL>

<script>
  jQuery('.chartbar').each(function(){
     var size = jQuery(this).css('width');
     jQuery(this).css('width',0).animate({'width':size},1500*Math.random());
  });
</script>
